
import React from "react";
import { hashHistory } from 'react-router';
import Confirm from "../../common/Confirm"
import InputBox from "../../common/InputBox"
import "./Limit.css";
import Bomb from './Bomb';
import Relay from "react-relay";
import { Modal, Button } from 'antd';
import UpdateRoleMutation from './mutation/UpdateRoleMutation'
import RoleDetailMutation from './mutation/RoleDetailMutation'

/*导出组件*/
export default class EditRole extends React.Component{
    constructor(props){
        super(props);
        this.style={
            confirm:{
                width: '96px',
                height: '27px',
                backgroundColor: "#f5c956",
                fontSize: "16px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius:"3px"
            },
            confirm_ok:{
                width: '96px',
                height: '27px',
                backgroundColor: "#69ca9c",
                fontSize: "16px",
                color: "#fff",
                fontFamily: "Microsoft YaHei",
                borderRadius:"3px",
                marginLeft:'500px',
                marginTop:"20px"
            },
            dutyName: {
                width: "293px",
                height: "30px",
                borderColor: "#ededed",
            },
            dutyContext:{
                width: "293px",
                height: "146px",
                borderColor: "#ededed",
            },
            label: {
                float:"left",
                display:"inline-block",
                fontSize: "14px",
                vertical: "-align: -2px",
                width:"312px",
                height:"51px",
                lineHeight:"51px",
                paddingLeft:"40px",
                borderRight:"1px solid #ededed",
                borderBottom:"1px solid #ededed"
            },
            input: {
                width: "13px",
                height: "13px",
                verticalAlign:"-2px",
                borderRadius:"3px"
            },
            inputbox_linemulit:{
                paddingRight:190,
                width:882,
                height:67,
                alignItems:'flex-start',
                textmarginTop:0,
                paddingLeft:20,
                marginLeft:4,
                paddingTop:8
            },
        };
        this.listInfo=[];
        this.state={
            text:""
        }
        //this.pidArr = sessionStorage.getItem('pid').split(',');
        this.ischeck=[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0];
        this.pidsubmit = [];
        this.rid="";
        this.pageNum;
        this.pageSize;
    }
    componentWillMount(){
        if(!this.props.params.rid){
            return
        }
        this.pageNum = this.props.params.pageNum;
        this.pageSize = this.props.params.pageSize;
        Relay.Store.commitUpdate(
            new RoleDetailMutation({
                rid:this.props.params.rid
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {

                    let errorcode = response.roleDetail.roleDetail.errorCode;
                    if(errorcode ==0){
                        let name = response.roleDetail.roleDetail.role.name;
                        let description = response.roleDetail.roleDetail.role.description;
                        let pid = response.roleDetail.roleDetail.role.pid;
                        this.refs.roleDesc.setState({
                            text:description || ''
                        });
                        this.refs.dutyName.setState({
                            text:name||''
                        });
                        let arr = pid.split(',');
                        arr.map((context,index)=>{
                            this.refs[context+'_index'].checked=true;
                            this.ischeck[context]=1
                        });
                    }
                }
            }
        )
    }

    /**错误提示框*/
    showError(title,value){
        Modal.error({
            title: !title?"提示：":title,
            content: value,
            width:390
        });
    }
    /*成功提醒*/
    showInfo(title,value){
        Modal.info({
            title: !title?"提示：":title,
            content: value,
            width:390
        });
    }

    /*取消/选中事件*/
    onclickbox(num,e){
        if(e.target.checked){
            this.ischeck[num] = 1
        }else{
            this.ischeck[num] = 0
        }
    }

    /*返回*/
    backRole(){
        hashHistory.push('/rolemanage')
    }

    /*去掉前后空格*/
    trim(str){
        return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');
    }

    /*确定按钮*/
    backConfirm(){
        let dutyName = this.trim(this.refs.dutyName.state.text);
        if (!dutyName) {
            this.showError("","角色名称不能为空");
            return ;
        }
        let limitnum = [];
        this.ischeck.map((context,index)=>{
            if(context==1){
                limitnum.push(index)
            }
        });
        if(limitnum.length == 0){
            this.showError("","请选择角色权限");
            return ;
        }
        this.refs.handleOK.setState({
            handleOK:true,
            text:"确定要编辑此角色吗"
        })
    }

    /*保存提交数据*/
    commitsurt(){
        let limitnum = []
        this.ischeck.map((context,index)=>{
            if(context==1){
                limitnum.push(index)
            }
        });
        let description = this.refs.roleDesc.state.text;
        let dutyName = this.trim(this.refs.dutyName.state.text);
        let rid;
        if(!this.props.params.rid){
            rid =''
        }else{
            rid =this.props.params.rid
        }
        Relay.Store.commitUpdate(
            new UpdateRoleMutation({
                name:dutyName,
                pid: limitnum.join(','),
                description: description,
                rid:rid
            }),
            {
                onFailure: () => {
                },
                onSuccess: (response) => {
                    let errorCode = response.updateRole.updateRole.errorCode;
                    let errorValue = response.updateRole.updateRole.value;
                    if(errorCode==0){
                        hashHistory.push('/rolemanage/'+this.pageNum+"/"+this.pageSize);
                        this.showInfo("","编辑角色成功");
                    }else{//显示错误信息
                        this.showError("编辑角色失败",errorValue);
                    }
                }
            }
        )
    }

    addList(){
        return(
            <div>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">企业管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,1)} ref={'1_index'}/>企业管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check"  type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,2)} ref={'2_index'}/>企业管理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">用户管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,5)} ref={'5_index'}/>用户管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,6)} ref={'6_index'}/>用户管理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">订单管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,7)} ref={'7_index'}/>订单管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,8)} ref={'8_index'}/>订单管理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">产品管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,9)} ref={'9_index'}/>产品管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,10)} ref={'10_index'}/>产品管理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb clear">
                    <div className="limit_edit_nor limit_edit_name">系统设置</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,11)} ref={'11_index'}/>人员管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check"  type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,12)} ref={'12_index'}/>人员管理操作权
                        </label>
                    </div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,13)} ref={'13_index'}/>角色管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check"  type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,14)} ref={'14_index'}/>角色管理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb clear">
                    <div className="limit_edit_nor limit_edit_name">结算中心</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,15)} ref={'15_index'}/>结算查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,16)} ref={'16_index'}/>结算操作权
                        </label>
                    </div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,18)} ref={'18_index'}/>账户充值查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,19)} ref={'19_index'}/>账户充值操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">贷款记录</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,17)} ref={'17_index'}/>贷款查阅权
                        </label>
                        <label style={this.style.label}></label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">统计管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,20)} ref={'20_index'}/>数据统计查阅权
                        </label>
                        <label style={this.style.label}></label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">反馈处理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,21)} ref={'21_index'}/>反馈处理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,22)} ref={'22_index'}/>反馈处理操作权
                        </label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">发票管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,23)} ref={'23_index'}/>发票管理查阅权
                        </label>
                        <label style={this.style.label}></label>
                    </div>
                </li>
                <li className="limit_edit_tb1 clear">
                    <div className="limit_edit_nor limit_edit_name2">退税管理</div>
                    <div className="limit_edit_nor limit_edit_limit clear">
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,24)} ref={'24_index'}/>退税管理查阅权
                        </label>
                        <label style={this.style.label}>
                            <input id="check" type="checkbox" name="check" style={this.style.input} onClick={this.onclickbox.bind(this,25)} ref={'25_index'}/>退税管理操作权
                        </label>
                    </div>
                </li>
            </div>
        )
    }

    render(){
        return(
            <div className="limit clear">
                <div className="limit_duty_box">
                    <Confirm style={this.style.confirm} tcontext={'返回'} touch={this.backRole.bind(this)}/>
                    <div className="limit_edit_line"></div>
                    <div className="limit_edit_duty">
                        <div className="limit_edit_dn">
                            <span className="limit_edit_span"><span className="limit_edit_span limit_edit_red">*</span>角色名称</span>
                            <InputBox style={this.style.dutyName} spaceFlag="false" regular={/^((\s.*)|(.*\s))$/} maxlength={20} defaultvalute="请输入角色名称" ref={"dutyName"}/>
                        </div>
                        <div className="limit_edit_dc" style={{width:"50%",height:123}}>
                            <span className="limit_edit_span">角色描述</span>
                            <InputBox titletext={''} defaultvalute="请输入角色描述" style={this.style.inputbox_linemulit} space={20} multiline={true} ref={"roleDesc"} maxlength={200} />
                        </div>
                    </div>
                    <ul className="limit_edit_ul">
                        <li className="limit_edit_th">
                            <span className="limit_edit_ts1 limit_duty_bor">功能名称</span>
                            <span className="limit_edit_ts2 limit_duty_bor">权限</span>
                        </li>
                        {
                            this.addList()
                        }
                        <Confirm style={this.style.confirm_ok} tcontext={'确定'} touch={this.backConfirm.bind(this)}/>
                    </ul>
                </div>
                <Bomb ref={"handleOK"} commitsurt={this.commitsurt.bind(this)}/>
            </div>
        )
    }
}

